<template>
    <view class="content">
        <view class="main">
            <van-nav-bar :title="navBarTitle" left-arrow @click-left="onClickLeft"
                style="z-index:104; background-color: #ffffff;"> </van-nav-bar>
            <!--滚动内容区域-->
            <scroll-view class="scroll-content" @scrolltolower="scrolltolower" @scroll="scrollPage" scroll-y
                show-scrollbar="false">
                <!-- <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading> -->
                <!-- <view class="scroll-card"> -->
                <view class="top_box"> </view>
                <!-- 地图map -->
                <view class="map">
                    <map style="width: 100%; min-height: 230px; overflow: auto;" id="myMap" scale="15"
                        show-location="true" enable-3D="true" enable-scroll="true" enable-poi="true"
                        :latitude="latitude" :longitude="longitude" :markers="allMarkers" @markertap="markertap"
                        @callouttap="callouttap" @labeltap="labeltap" @tap="mapTap" :show-location="true" enable-zoom
                        :enable-scroll="true">
                        <cover-view slot="customCallout	">
                            <block v-for="(item,index) in customCalloutMarkerIds" :key="index">
                                <cover-view :marker-id="item">
                                    <cover-view class="content">
                                        <!-- {{ item }}---111 -->
                                    </cover-view>
                                </cover-view>
                            </block>
                        </cover-view>
                    </map>
                </view>
                <view class="selfPickupBox ">
                    <view class="selfPickPointBox default">
                        <view class="boxTitle">当前自提点</view>
                        <view class="selfPickupList">
                            <view class="selfPickup_img"> <img
                                    :src="currentSelfPickup.imgUrl ? currentSelfPickup.imgUrl : 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/zitiPic.png'"
                                    alt="" mode="widthFix"> </view>
                            <!-- <view class="itemLeft"> -->
                                <view class="selfPickup_wrapper">
                                    <view class="selfPickup_wrapper_top">
                                        <view class="selfPickup_name ">{{ currentSelfPickup.merchantName }}</view>
                                        <view class="selfPickup_distance ">距离{{ currentSelfPickup.distance || params.distance }}</view>
                                    </view>
                                    <view class="selfPickup_wrapper_bottom">
                                        <view class="bottom_left">
                                            <view class="selfPickup_address ">{{ currentSelfPickup.address }}</view>
                                            <view class="selfPickup_businessHours ">营业时间：{{
                                                currentSelfPickup.businessHours }} </view>
                                        </view>
                                        <view class="itemRight" @tap="toMap(currentSelfPickup)">
                                            <view style="height: 17px; text-align: center; width: 100%;">
                                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png"
                                                    alt="" style="width: 16px; height: 16px;">
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            <!-- </view> -->
                        </view>
                    </view>
                    <template v-if="selfPickupList.length > 1">
                        <!-- 彩色的线 -->
                        <view class="clearfix">
                            <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png"
                                alt="" style=" display:block; width: 100%; height:3px;" />
                        </view>
                        <!-- 下面显示未被选中的自提点 -->
                        <view class="selfPickPointBox select">
                            <view class="boxTitle">附近自提点</view>
                            <view class="selfPickupList" v-for="(itemL, indexL) in selfPickupList" :id="indexL"
                                :key="indexL" v-if="!itemL.flag">
                                <template>
                                    <view class="selfPickup_img">
                                        <img :src="itemL.imgUrl" alt="" mode="widthFix">
                                    </view>
                                    <!-- <view class="itemLeft"> -->
                                        <view class="selfPickup_wrapper">
                                            <view class="selfPickup_wrapper_top">
                                                <view class="selfPickup_name ">{{ itemL.merchantName }}</view>
                                                <view class="selfPickup_distance ">{{ itemL.distance }}</view>
                                            </view>
                                            <view class="selfPickup_wrapper_bottom">
                                                <view class="bottom_left">
                                                    <view class="selfPickup_address ">{{ itemL.address }}</view>
                                                    <view class="selfPickup_businessHours ">营业时间：{{ itemL.businessHours
                                                        }} </view>
                                                </view>
                                                <view class="itemRight">
                                                    <view style="height: 17px; text-align: center; width: 100%;"
                                                        @tap="toMap(itemL)">
                                                        <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/self_pickup.png"
                                                            alt="" style="width: 16px; height: 16px;">
                                                    </view>
                                                    <view class="selectBtn" @tap="selectSelfPoint(indexL, itemL)">选择
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    <!-- </view> -->
                                </template>
                            </view>
                        </view>
                    </template>
                </view>

                <!-- </view> -->
            </scroll-view>
        </view>
        <van-toast id="van-toast" />
    </view>
</template>

<script>
import {getMerchantListApi } from '@/api/shoppingCart'
import {modifySelfPickApi} from '@/api/order'

import Toast from '@/wxcomponents/vant/toast/toast'
const normalCallout = {
    id: 1,
    latitude: 35.101902,
    longitude: 111.071467,
    iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png',
    width: 16,
    height: 21,
    callout: {
        content: '诚心水果店ccc',
        color: '#ffffff',
        fontSize: 12,
        borderWidth: 2,
        borderRadius: 12,
        // borderColor: '#000000',
        bgColor: '#FF6203',
        padding: 0,
        display: 'ALWAYS',
        textAlign: 'center'
    }
    // label: {
    //   content: 'label 文本',
    //   fontSize: 24,
    //   textAlign: 'center',
    //   borderWidth: 1,
    //   borderRadius: 5,
    //   bgColor: '#fff',
    //   padding: 5
    // }
}

const customCallout1 = {
    id: 2,
    latitude: 35.079879,
    longitude: 111.022376,
    width: 16,
    height: 21,
    iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png',
    customCallout: {
        anchorY: 0,
        anchorX: 0,
        display: 'ALWAYS',
        content: '诚心水果店ss',
        color: '#ffffff',
        fontSize: 12,
        borderWidth: 2,
        borderRadius: 20,
        // borderColor: '#000000',
        bgColor: '#FF6203',
        padding: 0,
        textAlign: 'center'
    }
}

const customCallout2 = {
    id: 3,
    latitude: 34.989385,
    longitude: 111.026571,
    iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png',
    width: 16,
    height: 21,
    customCallout: {
        anchorY: 10,
        anchorX: 0,
        display: 'ALWAYS',
        content: '诚心水果店aa',
        color: '#ffffff',
        fontSize: 12,
        borderWidth: 2,
        borderRadius: 20,
        // borderColor: '#000000',
        bgColor: '#FF6203',
        padding: 5,
        display: 'ALWAYS',
        textAlign: 'center'
    },
    callout: {}
}

const customCallout3 = {
    id: 4,
    latitude: 35.980765,
    longitude: 111.036954,
    iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png',
    width: 16,
    height: 21,
    customCallout: {
        anchorY: 0,
        anchorX: 20,
        display: 'ALWAYS'
    }
}

// const allMarkers = [normalCallout, customCallout1, customCallout2, customCallout3]

export default {
    components: {
    },
    data () {
        return {
            navBarTitle: '选择自提点',
            name: '凑单',
            scrolling: false, // 顶部区域吸顶效果
            scrollMT: '',
            listTop: 0,
            joSortpopup: false, // 商品排序弹窗
            JOpopup: false,
            popupBiaoshi: 0,
            selfPickupList: [
                // {
                //     id:1,
                //     imgUrl:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/zitiPic.png',
                //     merchantName: '诚心水果店',
                //     distance: '距离100米',
                //     address: '盐湖区安邑街道机场大道豪德贸易广场-一区彤彤百货商店',
                //     businessHours: '09:00-19:00',
                //     latitude: 35.088861, // 纬度
                //     longitude: 111.036879, // 经度
                //     communityInOutFlag:1
                // },
                // {
                //     id:2,
                //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/zitiPic.png',
                //     merchantName: '喜洋洋便利店',
                //     distance: '距离150米',
                //     address: '盐湖区安邑街道机场大道豪德贸易广场-一区彤彤百货商店',
                //     businessHours: '09:00-19:00',
                //     latitude: 35.110266, // 纬度
                //     longitude: 111.036054 // 经度
                // },
                // {
                //     id:3,
                //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/zitiPic.png',
                //     merchantName: '熊出没便利店',
                //     distance: '距离150米',
                //     address: '盐湖区安邑街道机场大道豪德贸易广场-一区彤彤百货商店',
                //     businessHours: '09:00-19:00',
                //     latitude: 35.110266, // 纬度
                //     longitude: 111.036054 // 经度
                // }
            ],

            // 与地图有关的测试部分
            latitude: 35.088861, // 维度
            longitude: 111.03687, // 经度
            markers: [],
            customCalloutMarkerIds: [1, 2, 3, 4],
            num: 1,
            // allMarkers,
            params:undefined,
            currentSelfPickup:null,
            // currentSelfPickup:{
            //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/zitiPic.png',
            //     merchantName: '诚心水果店',
            //     distance: '距离100米',
            //     address: '盐湖区安邑街道机场大道豪德贸易广场-一区彤彤百货商店',
            //     businessHours: '09:00-19:00',
            //     latitude: 35.088861, // 纬度
            //     longitude: 111.03687, // 经度
            //     communityInOutFlag: 1
            // },
            currentLocationMarker: null,
            loading: true,
            pageSource:'',
            orderId:''
        }
    },
    computed: {
        merchantMarkers() {
            return this.selfPickupList.map((merchant, index) => {
                return {
                    id: index + 5, // 避免与原有的标记点 ID 冲突
                    latitude: merchant.latitude,
                    longitude: merchant.longitude,
                    iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png',
                    width: 16,
                    height: 21,
                    callout: {
                        content: merchant.merchantName,
                        color: '#ffffff',
                        fontSize: 12,
                        borderWidth: 2,
                        borderRadius: 12,
                        bgColor: '#FF6203',
                        padding: 2,
                        display: 'ALWAYS',
                        textAlign: 'center'
                    }
                };
            });
        },
        allMarkers() {
            // const originalMarkers = [normalCallout, customCallout1, customCallout2, customCallout3];
            // // return originalMarkers.concat(this.merchantMarkers);
            // let all = originalMarkers.concat(this.merchantMarkers);
            // if (this.currentLocationMarker) {
            //     all = all.concat(this.currentLocationMarker);
            // }
            // return all;
            // return this.merchantMarkers.concat(this.currentLocationMarker || []);

            return this.merchantMarkers.concat(
                this.currentLocationMarker ? [this.currentLocationMarker] : []
            );
        }
    },
    async onLoad (data) {
        try {
            if (data && data.params) {
                this.params = JSON.parse(decodeURIComponent(data.params))
                console.log(this.params, 'params',this.params.userAdderssDefault?.latitude,this.params.userAdderssDefault?.longitude)
                this.pageSource = this.params?.pageSource || undefined
                this.orderId = this.params?.orderId || undefined
                if(this.params.userAdderssDefault){
                    this.latitude = parseFloat(this.params.userAdderssDefault?.latitude)|| 35.088861;
                    this.longitude = parseFloat(this.params.userAdderssDefault?.longitude) || 111.03687
                    console.log(this.latitude,this.longitude,'用户地址',typeof(this.latitude))
                    // 添加用户地址标记
                    this.currentLocationMarker = {
                        id: 9999,
                        latitude: this.latitude,
                        longitude: this.longitude,
                        iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png', // 使用不同的图标
                        width: 16,
                        height: 21,
                        callout: {
                            content: this.params.userAdderssDefault.detail,
                            color: '#ffffff',
                            bgColor: '#FF6203',
                            display: 'ALWAYS',
                            fontSize: 12,
                            borderWidth: 2,
                            borderRadius: 12,
                            padding: 2,
                            textAlign: 'center'
                        }
                    };
                }
                if (this.params.addressId) {
                    await this.getMerchantList(this.params.addressId)
                }
                if (this.params.foundEleMerchant) {
                    this.currentSelfPickup = this.params.foundEleMerchant
                    this.highlightSelectedMerchant()
                } 
                // 强制更新地图中心点
                this.$nextTick(() => {
                    this.mapCtx.moveToLocation({
                        latitude: this.latitude,
                        longitude: this.longitude
                    });
                });
                // if(this.params.merchantList){
                //     this.selfPickupList = this.params.merchantList
                //     if(this.selfPickupList.length > 0){
                //         this.selfPickupList.forEach(single=>{
                //             this.$set(single,'flag', single.communityInOutFlag===1?true:false)
                //         })
                //     }
                //     this.currentSelfPickup = this.selfPickupList.find(ele => (ele.communityInOutFlag=== 1 || ele.flag))
                // }
            }
            // 如果没有数据则显示默认
            if (this.selfPickupList.length === 0) {
                this.currentSelfPickup = null
            }
        
        } catch (error) {
            console.error('页面初始化失败:', error)
            Toast('数据加载失败')
        } finally {
            this.loading = false
        }
        // this.getCurrentLocation()
    },
    onReady () {
        this.onRefresherMethod()
        this.mapCtx = wx.createMapContext('myMap')
    },
    methods: {
        refresherpulling () {
            if (!this.isrefresher) {
                this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
                this.onRefresherMethod()
            }
        },
        onRefresherMethod () {
            if (!this.isrefresher) {
                this.loadingIsShow = true
            }
            this.loadingIsShow = false
            // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
            this.time = setTimeout(e => {
                this.isrefresher = false
            }, 300)
        },
        scrolltolower () {

        },
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 80 && !this.scrolling) {
                this.scrolling = true
            } else if (e.detail.scrollTop <= 80 && this.scrolling) {
                this.scrolling = false
            }
        },
        onClickLeft () {
           // 获取页面栈
            const pages = getCurrentPages();
            const prevPage = pages[pages.length - 2]; // 上一个页面实例
            
            // 直接设置前页数据
            if (prevPage && prevPage.$vm) {
                prevPage.$vm.foundEleMerchant = this.currentSelfPickup;
                // prevPage.$vm.getMerchantList(this.params.addressId); // 不能重新重新加载商户列表
            }
            
            uni.navigateBack({
                success: () => {
                    // 通过事件总线更新
                    uni.$emit('selfPickupUpdate', this.currentSelfPickup);
                }
            });

        },

        // map
        // 点击地图触发
        mapTap(e){
            console.log('@@@ maptap',e)
            // const newMarker = {
            //     id: Date.now(), // 使用时间戳作为唯一 ID
            //     latitude: e.detail.latitude,
            //     longitude: e.detail.longitude,
            //     iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png',
            //     width: 16,
            //     height: 21,
            //     callout: {
            //         content: '新标记点',
            //         color: '#ffffff',
            //         fontSize: 12,
            //         borderWidth: 2,
            //         borderRadius: 12,
            //         bgColor: '#FF6203',
            //         padding: 0,
            //         display: 'ALWAYS',
            //         textAlign: 'center'
            //     }
            // };
            // this.markers = this.allMarkers.concat(newMarker);
            // const newMerchant = {
            //     imgUrl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/zitiPic.png',
            //     merchantName: '新标记点',
            //     distance: '未知',
            //     address: '未知',
            //     businessHours: '未知',
            //     latitude: e.detail.latitude,
            //     longitude: e.detail.longitude,
            //     communityInOutFlag: 0
            // };
            // this.selfPickupList = this.selfPickupList.concat(newMerchant);
        },
        // 点击标记触发
        markertap (e) {
            console.log('@@@ markertap', e)
            const markerId = e.markerId;
            const marker = this.allMarkers.find(marker => marker.id === markerId);
            if (marker) {
                // 更新地图的中心点纬度
                this.latitude = marker.latitude; 
                // 更新地图的中心点经度
                this.longitude = marker.longitude; 
                uni.showToast({
                    title: `点击了 ${marker.callout.content}`,
                    icon: 'none'
                });
            }
        },
        callouttap (e) {
            console.log('@@@ callouttap', e)
        },
        labeltap (e) {
            console.log('@@@ labeltap', e)
        },

        translateMarker () {
            const length = this.data.markers.length
            if (length === 0) return

            const index = Math.floor(Math.random() * length)
            const markers = this.data.markers
            const marker = markers[index]
            marker.latitude = marker.latitude + 0.002
            marker.longitude = marker.longitude + 0.002
            const that = this
            this.mapCtx.translateMarker({
                markerId: marker.id,
                duration: 1000,
                destination: {
                    latitude: marker.latitude,
                    longitude: marker.longitude
                },
                animationEnd () {
                    that.setData({ markers })
                    console.log('animation end')
                },
                complete (res) {
                    console.log('translateMarker', res)
                }
            })
        },
        toMap(item){
            console.log(item,'item')
            const params = {
              merchantLocation: {
                latitude: parseFloat(item.latitude),
                longitude: parseFloat(item.longitude)
              },
              userLocation:{
                latitude: parseFloat(this.latitude),
                longitude:parseFloat(this.longitude)
              }
            }
            uni.navigateTo({
                url:
                '/pages/shoppingCart/map?params=' +
                encodeURIComponent(JSON.stringify(params))
            })
        },
        // 选择
        selectSelfPoint(val,item){
            console.log(val,'val-----')
            this.selfPickupList.forEach((ele,index)=>{
                if(ele.id===item.id){
                    ele.flag=true
                }else{
                    ele.flag =false
                }
            })
            this.currentSelfPickup = item
            console.log(this.currentSelfPickup,'currentSelfPickup')
            if(this.pageSource === 'orderDetails'){
                modifySelfPickApi(this.orderId,this.currentSelfPickup.id).then((res)=>{
                    console.log(res,'修改自提点')
                    if(res.code===200){
                        uni.showToast({
                            title: '自提点修改成功',
                            icon: 'none'
                        })
                    }
                })
            }
        },
        getCurrentLocation() {
            wx.getLocation({
                type: 'wgs84',
                success: (res) => {
                    // 更新地图的经纬度
                    this.latitude = res.latitude;
                    this.longitude = res.longitude;
                    // 添加当前位置的标记点
                    const currentLocationMarker = {
                        id: 999,
                        latitude: res.latitude,
                        longitude: res.longitude,
                        iconPath: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/location1129.png',
                        width: 16,
                        height: 21,
                        callout: {
                            content: '当前位置',
                            color: '#ffffff',
                            fontSize: 12,
                            borderWidth: 2,
                            borderRadius: 12,
                            bgColor: '#FF6203',
                            padding: 0,
                            display: 'ALWAYS',
                            textAlign: 'center'
                        }
                    };
                    // 更新标记点数组
                    this.markers = this.allMarkers.concat(currentLocationMarker);
                },
                fail: (err) => {
                    console.error('获取位置失败', err);
                    wx.showToast({
                        title: '获取位置失败，请检查权限',
                        icon: 'none'
                    });
                }
            });
        },
        // 获取商户信息列表
        async getMerchantList(addressId) {
            if (!addressId) {
                console.error('缺少地址ID');
                return;
            }
            try {
                const res = await getMerchantListApi({ pageSize: 10, pageNum: 1, addressId: addressId })
                if (res.code === 200 && res.data.merchantList.length > 0) {
                    this.selfPickupList = res.data.merchantList.map(merchant => ({
                        ...merchant,
                        distance: this.calcDistance(merchant), // 添加计算距离的方法
                        imgUrl: merchant.imgUrl || 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/zitiPic.png',
                        latitude: Number(merchant.latitude), // 确保数值类型
                        longitude: Number(merchant.longitude),
                    }))
                    // if (this.selfPickupList.length > 0) {
                    //     this.selfPickupList.forEach((single,index) => {
                    //         this.$set(single, 'flag', single.id === this.params.foundEleMerchant.id)
                    //     })
                    // }
                     // 默认选中第一个
                    if (this.selfPickupList.length > 0) {
                        this.currentSelfPickup = this.selfPickupList[0]
                        this.highlightSelectedMerchant()
                    }
                    // this.updateMapMarkers()
                    // 暂时不强制更新  强制更新导致 会以当前位置为中心  页面需以用户地址为中心
                    // 强制更新地图  
                    // this.$nextTick(() => {
                    //     this.mapCtx = wx.createMapContext('myMap');
                    //     this.mapCtx.moveToLocation();
                    // });
                }
            } catch (error) {
                console.error('获取商户失败:', error);
                this.currentSelfPickup = null;
            }
        },

        // 新增方法：高亮选中商户
        highlightSelectedMerchant() {
            this.selfPickupList.forEach(single => {
                this.$set(single, 'flag', single.id === this.currentSelfPickup?.id)
            })
        },

        // 新增方法：更新地图标记
        updateMapMarkers() {
            if (this.currentSelfPickup) {
                this.latitude = parseFloat(this.currentSelfPickup.latitude)
                this.longitude = parseFloat(this.currentSelfPickup.longitude)
            }
        },
        // 新增距离计算方法
        calcDistance(merchant) {
            // 这里需要实现实际的距离计算逻辑，示例使用简单计算
            if (!this.latitude || !this.longitude) return '未知距离'
            // 使用传入的地址坐标代替当前页面坐标
            const baseLat = this.params.userAdderssDefault?.latitude || this.latitude
            const baseLng = this.params.userAdderssDefault?.longitude || this.longitude

            const R = 6371 // 地球半径（千米）
            const dLat = (merchant.latitude - baseLat) * Math.PI / 180
            const dLon = (merchant.longitude - baseLng) * Math.PI / 180
            const a =
                Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(this.latitude * Math.PI / 180) *
                Math.cos(merchant.latitude * Math.PI / 180) *
                Math.sin(dLon / 2) * Math.sin(dLon / 2)
            const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
            const distance = R * c
            return distance < 1 ?
                `${Math.round(distance * 1000)}米` :
                `${distance.toFixed(1)}公里`
        }

    }
}
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
	z-index: -3;

}

.main {
    position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	background-color: #ffffff;

    .fixed_top {
        position: fixed;
        width: calc(100% - 48px);
        z-index: 104;  //与页面的navbar同级
        // top: 85px;
    }
    .scroll_box{
        position: absolute;
        top: 107px;
        z-index: 1;
    }
}

::v-deep .van-nav-bar {
    background-color: #ffffff !important;
    z-index: 100 !important;
}

::v-deep .van-nav-bar__arrow {
    color: #111111 !important;
}

::v-deep .van-icon {
    color: #111111 !important;
}

::v-deep .van-nav-bar__left {
    height: 44px;
    width: 56px;
}

.scroll-content {
    flex: 1;
    height: 1px;
}
map {
    position: relative;
    width: 100%;
    height: 300px; /* 设置合适的高度 */
}

.backIcon {
    margin-top: 8px;
}

.scroll-card {
    padding: 0 24px 48px;

}

.top_box{
    padding-left: 24px;
    padding-right: 24px;
    background: #ffffff;
}

// 名称+日期
.titleDiv{

    .tableTitle{
        // font-weight: bold;
        font-size: 26px;
        line-height: 26px;
        text-align: left;
        color: #111111;
    }
    .titleDate{
        // font-weight: bold;
        font-size:10px;
        text-align: left;
        color: #A6A6A6;
        line-height: 10px;
        margin-top: 15px;
        margin-bottom: 29px;
    }
}

// 固定区域
.tableBox_top{
    background: #ffffff;
    // padding-top: 29px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 12px;
}
.tableBox_top_item{
    // font-weight: bold;
    font-size:14px;
    text-align: left;
    color: #111111;
    line-height: 14px;
}

.selfPickupBox{
    background: #ffffff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: -1;

}
.selfPickPointBox{
    width: calc(100% - 48px);
    // display: flex;
    // justify-content: space-between;
    // // justify-content: flex-start;
    // align-items: center;
    // flex-wrap: wrap;
    // /* 允许Flex项目换行 */
    // // background: palegoldenrod;
}
.default{
    padding: 24px;
    // background-color: palegoldenrod;
}
.select{
    padding: 24px;
}
.boxTitle{
    font-size: 20px;
    text-align: left;
    color: #111111;
    line-height: 20px;
    padding-bottom: 25px;
}

.productList_content {}

.selfPickupList {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    background: #ffffff;


    // .itemLeft {
    //     display: flex;
    //     align-items: center;
    //     // width: calc(100% - 58px);
    //     width: 68%;
    // }

    .itemRight {
        width: 58px;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .selectBtn{
            flex: 1;
            width: 100%;
            border-radius: 20px;
            background: #ff6203;
            font-size: 12px;
            color: #ffffff;
            text-align: center;
            padding-top: 4px;
            padding-bottom: 4px;
            margin-top: 12px;

        }
    }

    .selfPickup_img {

        width: 32%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        img {
            width: 100%;
            // height: 156px;
            height: auto;
        }
    }
    .selfPickup_wrapper{
        // position: relative;
        // display: flex;
        // justify-content: space-between;
        // flex-direction: column;
        padding-left:12px;
        width:68%;
    }
    .selfPickup_wrapper_top {
        // position: absolute;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .selfPickup_name {
        // max-width: 156px;
        white-space: pre-wrap;  //换行  样式会出问题

        // max-width: 100%;
        // white-space: nowrap;
        // /* 防止文本换行 */
        // overflow: hidden;
        // /* 超出部分隐藏 */
        // text-overflow: ellipsis;
        // width: 100%;
        font-size: 14px;
        // line-height: 14px;
        text-align: left;
        color: #111111;
        margin-right: 16rpx;
    }

    .selfPickup_distance {
        // max-width: 156px;
        // white-space: pre-wrap;

        max-width: 100%;
        white-space: nowrap;
        /* 防止文本换行 */
        overflow: hidden;
        /* 超出部分隐藏 */
        text-overflow: ellipsis;
        /* 显示省略号 */
        // font-weight: bold;

        font-size: 14px;
        line-height: 14px;
        text-align: left;
        color: #FF6203;
        // margin-left: 8px;
    }

    .selfPickup_wrapper_bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .bottom_left{
        width: calc(100% - 58px);
    }
    .selfPickup_address {
        // position: absolute;
        // top: 50%;
        // width: 100%;
        width: 95%;
        white-space: pre-wrap;
        font-size: 12px;
        text-align: left;
        // color: #666666;
        color: #888888;
        margin-top: 12px;
    }

    .selfPickup_businessHours {
        // position: absolute;
        // bottom: 0px;
        line-height: 12px;
        font-size: 12px;
        text-align: left;
        // color: #737373;
        color: #888888;
        margin-top: 12px;
    }

}

</style>
